<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge，chrome=1">
    <title>HTML基本标签</title>
    <style type="text/css">
        .aa {
            line-height: 30px;
        }
        .text-input {
            padding: 15px;
            border: thick dotted #FF0000;
            margin: 10px;
            background-image: url(img/hetao.jpg);
            /*background-color: aqua;*/
        }
        .text-button {
            width: 50px;
            height: 50px;
            padding: 5px;
            background-color: chartreuse;
        }
        select {
            width: 100px;
            margin: 20px;
        }
        textarea {
            height: 50px;
        }
        .test {

            background-color: chartreuse;
        }
        h1 {
            background-color: #FF0000;
        }
        .p {
            background-color: aqua;
        }
        .a-block {
            width: 50px;
            height: 50px;
            background-color: aquamarine;
        }
        .aa {
            background-color: coral;
        }
    </style>
</head>
<body>
<h1>一、根据标签闭合方式分类</h1>
<h2>1.单标签(不可以嵌套)</h2>
<p>例如：
    <code>&lt;hr/&gt;</code><span>在HTML页面中创建一条水平线</span>
<hr/>
<code>&lt;br/&gt;</code><span>换行</span><br/>
<code>&lt;img/&gt;</code><br/><img src="img/hetao.jpg"/><img src="img/hetao1.jpg" alt="核桃"/><br/>
<code>&lt;meta/&gt;</code>
等等
</p>
<h2>2.双标签(可以嵌套)</h2>
<p>例如：
    <code>&lt;div&gt;&lt;/div&gt;</code>
    <code>&lt;table&gt;&lt;/table&gt;</code><br/>
    <code>&lt;span&gt;&lt;/span&gt;</code><span>用来组合文档中的行内元素</span><br/>
    <code>&lt;ul&gt;&lt;/ul&gt;</code><span>无序列表</span><br/>
    <code>&lt;ol&gt;&lt;/ol&gt;</code><span>有序列表</span>
    等等
</p>
<h1>二、根据标签的类型分类</h1>
<h2>1.行内元素(内联元素)</h2>
<strong>高及外边高，行距和内边距部分可改变，宽度只与内容有关；行内元素只能容纳文本或其他行内元素。</strong><br/>
<p>例如：
    <code>&lt;a&gt;&lt;/a&gt;</code>
    <code>&lt;span&gt;&lt;/span&gt;</code>
    <code>&lt;strong&gt;&lt;/strong&gt;</code>
    <code>&lt;b&gt;&lt;/b&gt;</code>
    <code>&lt;em&gt;&lt;/em&gt;</code>
    <code>&lt;i&gt;&lt;/i&gt;</code>
    <code>&lt;label&gt;&lt;/label&gt;</code><br/>
    等等
    <!--<label for="male">Male</label>
    <input type="radio" name="sex" id="male" />

    <label for="female">Female</label>
    <input type="radio" name="sex" id="female" />-->
</p>
<img src="img/hetao.jpg"/><a class="aa">行高可用line-heigth设置</a>&nbsp;<span>真的耶哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</span>
<h2>2.行内块元素</h2>
<strong>内部表现为块级元素，可设置宽高，支持盒模型；外部表现为行内元素，不独占一行，从左到右排列</strong>
<p>例如：
    <code>&lt;input/&gt;</code>
    <code>&lt;button&gt;&lt;/button&gt;</code>
    <code>&lt;select&gt;&lt;/select&gt;</code>
    <code>&lt;img/&gt;</code>
    <code>&lt;textarea&gt;&lt;/textarea&gt;</code>
    等等
</p>
<input class="text-input" value="input元素"/>
<button class="text-button" type="reset"></button>
<select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<img src="img/hetao.jpg"/>
<textarea></textarea>
<h2>3.块级元素</h2>
<strong>总是在新行上开始，占据一整行；</strong><br/>
<strong>边距可控；</strong><br/>
<strong>宽始终是与浏览器宽度一样，与内容无关；</strong><br/>
<strong>可以容纳内联元素和其他元素；</strong>
<p>
    例如：
    <code>&lt;div&gt;&lt;/div&gt;</code>
    <code>&lt;h1&gt;&lt;/h1&gt;</code>
    <code>&lt;p&gt;&lt;/p&gt;</code><br/>
    <strong>但是p标签不可以存放别的块标签</strong>
</p>
<div class="test">
    <input />
</div>
<h1>h1块级标签</h1>
<p class="p">p标签</p>
<h2>4.元素类型的转换方式</h2>
<p>display:inline/inline-block/block</p>
<h3>块级元素转为行内元素</h3>
<p style="display: inline">p标签</p>
<h1 style="display: inline">h1</h1>
<h3>行内元素转为行内块</h3>
<a class="a-block" style="display: inline-block">a标签</a>
<b style="display: inline-block">b标签</b>
<h3>行内元素转为块级元素</h3>
<a class="aa" style="display: block">a标签</a>
</body>
</html>